<template>
  <div>
    <h2>销售总量</h2>
    <div class="chart"  id="oneChart">
      容器
    </div>
  </div>
</template>

<script>
import {inject,onMounted, reactive} from "vue"


export default {
  setup() {
    let $echarts = inject("echarts")
    let axios = inject("axios")

    let data=reactive({})
    let xdata=reactive([])
    let ydata=reactive([])
    function setData(){
      xdata=data.data.chartData.chartData.map(v=>v.title)
      ydata=data.data.chartData.chartData.map(v=>v.num)
    }

    async function getState() {
      data=await axios({url: "/one/data"})
    }
    //dom加载完毕
    onMounted(()=> {
      let myChart=$echarts.init(document.getElementById("oneChart"))
      getState().then(()=>{
        setData()
         myChart.setOption({
          grid:{
            top:"3%",
            left:"1%",
            right:"6%",
            bottom:"3%",
            containLabel:true
          },
        xAxis:{
          type: "value",
          axisLine:{
            lineStyle:{
              color:"#fff"
            }
          }
        },
        yAxis:{
          type: "category",
          data: xdata,
          axisLine:{
            lineStyle:{
              color:"#fff"
            }
          }
        },
        series:[{
          type: "bar",
          data: ydata,
          itemStyle:{
            barBorderRadius:[0,20,20,0],
            color:{
               type: 'linear',
            colorStops: [{
               offset: 0, color: '#005eaa' // 0% 处的颜色
             },
             {
               offset: 0.5, color: '#339ca8' // 50% 处的颜色
             },
             {
               offset: 1, color: '#cda819' // 100% 处的颜色
             }],
            }
          }
        }]
      })
      })
    })
    return {
      getState,data,xdata,ydata,setData
    }
  }
}
</script>

<style scoped>
.chart {
  height: 4.5rem;
}

h2 {
  height: .6rem;
  color: #fff;
  line-height: .6rem;
  font-size: 0.25rem;
  text-align: center;
}
</style>